<template>
	<view class="DetailsBox" :style="{'--color':color}">
		<view class="Info">
			<view class="row a-center">
				<image :src="$imgUrls(info.v_headimg)" mode="aspectFill"
					class="user_head_img"></image>
				<view class="d-flex f-column">
					<view class="d-flex a-center">
						<text class="size30 black">{{info.v_nickname}}</text>
						<view class="Vip" v-if="info.vip_name">{{info.vip_name}}</view>
					</view>
					<text class="black size26 m-top10">{{info.v_tel}}</text>
				</view>
			</view>


			<view class="gridBox">
				<view class="grid_list">
					<text class="h6">余额(元)</text>
					<text class="size30 p-top4">{{info.v_money}}</text>
				</view>
				<view class="grid_list">
					<text class="h6">积分(元)</text>
					<text class="size30 p-top4">{{info.v_jifen_yue}}</text>
				</view>
				<view class="grid_list">
					<text class="h6">累计收益(元)</text>
					<text class="size30 p-top4">{{info.cumulative_income}}</text>
				</view>
				<view class="grid_list">
					<text class="h6">待提现(元)</text>
					<text class="size30 p-top4">{{info.uncheck_money}}</text>
				</view>
			</view>

		</view>



		<view class="content">
			<view class="d-flex f-column m-bot24">
				<text class="color_99 h6">申请金额</text>
				<text class="color_33 size30 m-top8">￥{{info.applyMoney}}</text>
			</view>
			<view class="d-flex f-column m-bot24">
				<text class="color_99 h6">手续费</text>
				<text class="color_33 size30 m-top8">￥{{info.serviceMoney}}</text>
			</view>
			<view class="d-flex f-column m-bot24">
				<text class="color_99 h6">实际到帐</text>
				<text class="color_ff2 size32 m-top8">￥{{info.money}}</text>
			</view>
			<view class="d-flex f-column m-bot24">
				<text class="color_99 h6">提现至</text>
				<text class="color_33 size30 m-top8">{{info.cardInfo}}</text>
			</view>
			<view class="d-flex f-column m-bot24" v-if="info.cash_method == 1">
				<text class="color_99 h6">收款账户</text>
				<view class="d-flex f-column m-top20">
					<text class="bank" user-select>提现银行：{{info.bankName}}</text>
					<text class="bank" user-select v-if="info.branchBank">开户支行：{{info.branchBank}}</text>
					<text class="bank" user-select>银行账号：{{info.bankCard}}</text>
					
				</view>
			</view>
			<view class="d-flex f-column m-bot24" v-else>
				<text class="color_99 h6">收款码</text>
				<view class="Collection_box" @click="$common.PreviewImg(Img)">
					<image :src="$imgUrls(info.codeImg)" mode="aspectFill" class="Code"></image>
				</view>
			</view>
			<view class="d-flex f-column ">
				<text class="color_99 h6">申请时间</text>
				<text class="color_33 size30 m-top8">{{info.addDate}}</text>
			</view>


		</view>


		<view class="footer" v-if="info.state == '1'">
			<view class="fooBtn refuse" @click.stop="Withdrawal('refuse')">拒绝申请</view>
			<view class="fooBtn agree" @click.stop="Withdrawal('adopt')">确认申请</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				Img: 'http://sraimgcdn2.mogoie.com//Uploads/img2019/7526/6126/202407669f90ae8b4c2.jpg',
				id:'',
				info:'',
			}
		},
		onLoad(opt) {
			if(opt.id) this.id = opt.id
			this.withdrawalDetail()
		},
		methods: {
			withdrawalDetail(){
				this.$http.get({
					url:'/WokersApi/withdrawalDetail',
					data:{
						id:this.id
					}
				}).then(res=>{
					if(res.code != 200) return this.$Toast(res.msg)
					const result = res.data
					this.info = result
				})
			},
			Withdrawal(type){
				this.$showLoading('')
				this.$http.post({
					url:'/WokersApi/Withdrawal',
					data:{
						type,
						ids:this.id
					}
				}).then(res=>{
					this.$hideLoading()
					 if(res.code != 200) return this.$Toast(res.msg)
					 this.$Toast(res.msg)
					 this.withdrawalDetail()
				})
			},
		},

		computed: {
			...mapState(['color'])
		},
	}
</script>
<style>
	page {
		background-color: #f8f8f8;
	}
</style>

<style lang="scss" scoped>
	.DetailsBox {
		padding-top: 20rpx;
		padding-bottom: calc(env(safe-area-inset-bottom) + 40px);
		padding-bottom: calc(constant(safe-area-inset-bottom) + 40px);
	}

	.Info {
		width: 710rpx;
		margin: 0 auto;
		padding: 30rpx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		border-radius: 10rpx;
	}

	.user_head_img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.Vip {
		background-color: var(--color);
		padding: 2rpx 10rpx;
		color: #fff;
		font-size: 22rpx;
		border-radius: 10rpx;
		margin-left: 10rpx;
	}

	.gridBox {
		width: 100%;
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
		// display: grid;
		// grid-template-columns: repeat(4, 1fr);
	}

	.grid_list {
		display: flex;
		flex-direction: column;
		justify-content: center;
		color: #000;
		align-items: center;
	}

	.content {
		width: 710rpx;
		background-color: #ffffff;
		padding: 30rpx;
		border-radius: 10rpx;
		margin: 20rpx auto;
		display: flex;
		flex-direction: column;
	}

	.Collection_box {
		width: 400rpx;
		height: 400rpx;
		background-color: #f8f8f8;
		margin-top: 16rpx;
		padding: 12rpx;
	}

	.Code {
		width: 100%;
		height: 100%;
	}

	.footer {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		padding-left: 30rpx;
		padding-right: 30rpx;
		// #ifdef MP-WEIXIN
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		// #endif
		// #ifdef H5
		padding-bottom: 30rpx;
		// #endif
		display: flex;
		justify-content: space-between;
	}

	.fooBtn {
		width: 330rpx;
		height: 76rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 30rpx;
		border-radius: 10rpx;
	}

	.refuse {
		background-color: #999;
	}

	.agree {
		background-color: var(--color);
	}
	.bank{
		color: #000;
		font-size:26rpx;
		line-height: 50rpx;
	}
</style>